<template>
  <div class="main-bg">
    <div >
      <div v-for="answerData in answerDataList" :key="answerData.answerId" >
        <div class="entity-item">

          <div class="user">
            <!--      {{answerData.userImg}}-->
            <el-avatar
                :src="answerData.answerUserImageUrl"
            />
            <el-text size="large"> {{ answerData.answerUserNickname }} </el-text>

          </div>
          <div class="displayText" @click="toAnswerInfo(answerData.answerId, answerData.questionId)">
            {{ answerData.answerDisplayText }}
          </div>
          <div class="bottom-time">
            <span>发布于{{ answerData.answerCreateTime }}</span>
          </div>

          <div class="bottom-items">
            <div v-if=" answerData.nowUserLiked === '0' " class="up-down" @click="liked(answerData.answerId)">赞同({{answerData.likeCount}})</div>
            <div v-else-if=" answerData.nowUserLiked !== '0' " class="up-downed" @click="cancelLiked(answerData.answerId)">已赞同({{answerData.likeCount}})</div>

            <div v-if=" answerData.nowUserCollected === '0' " class="up-down" @click="collected(answerData.answerId)">收藏({{answerData.collectCount}})</div>
            <div v-if=" answerData.nowUserCollected !== '0' " class="up-downed" @click="cancelCollected(answerData.answerId)">已收藏({{answerData.collectCount}})</div>

            <div v-if=" answerData.nowUserAgainsted === '0' " class="up-down" @click="againsted(answerData.answerId)">反对({{answerData.againstCount}})</div>
            <div v-if=" answerData.nowUserAgainsted !== '0' " class="up-downed" @click="cancelAgainsted(answerData.answerId)">已反对({{answerData.againstCount}})</div>

            <div class="up-down" @click="changeShowComment(answerData.answerId)">评论({{answerData.commentCount}})</div>
          </div>
          <!--        <infinite-loading @infinite="requestNextData"></infinite-loading>-->
          <div v-if="answerData.showComment === '1' ">
            <CommentCard
                entityType="answer"
                :entityId="answerData.answerId"
            >
            </CommentCard>
          </div>
        </div>
      </div>
      <div class="more-data" @click="requestNextData">{{ pageText }}</div>
    </div>
  </div>
</template>

<script>
import axios from "@/settings/axios";
import * as commonUtils from "@/utils/CommonUtils";
import {ElMessage} from "element-plus";
import * as nameMapping from "@/settings/nameMapping";
import CommentCard from "@/components/CommentCard";
import router from "@/router";

export default {
  name: "OneQuestionAnswerListBox",
  components: {CommentCard},
  data() {
    return {
      questionData: {},
      answerDataList: [],
      pageNo: 1,
      pageSize: 10,
      pageText : nameMapping.LOAD_DATA,

    }
  },
  watch: {
    async questionId(newValue, oldValue) {
      oldValue;
      if (this.questionId !== null && this.questionId !== "" && this.questionId !== undefined) {
        let params = {
          "pageNo": this.pageNo,
          "pageSize": this.pageSize,
          "questionId": this.getQuestionId()
        }
        let answerDataList = await axios.get("/shane_answer/page_by_content", params);
        Array.prototype.push.apply(this.answerDataList, answerDataList);
        if (answerDataList.length === 0) {
          this.pageText = nameMapping.NO_DATA;
        }
        else if (answerDataList.length < 10) {
          this.pageText = nameMapping.NO_NEXT_DATA;
        }
      }
    },
  },
  async mounted() {

  },
  methods: {
    async liked(answerId){
      let params = {
        "answerId": answerId
      }
      let message = await axios.post("/shane_answer/insert_one_answer_likes", params);
      const answerData = this.answerDataList.find(obj => obj.answerId === answerId);
      answerData.nowUserLiked = "1";
      answerData.likeCount = commonUtils.strAddOne(answerData.likeCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async cancelLiked(answerId) {
      let params = {
        "answerId": answerId
      }
      let message = await axios.post("/shane_answer/delete_one_answer_likes", params);
      const answerData = this.answerDataList.find(obj => obj.answerId === answerId);
      answerData.nowUserLiked = "0";
      answerData.likeCount = commonUtils.strSubOne(answerData.likeCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async collected(answerId) {
      let params = {
        "answerId": answerId
      }
      let message = await axios.post("/shane_answer/insert_one_answer_collect", params);
      const answerData = this.answerDataList.find(obj => obj.answerId === answerId);
      answerData.nowUserCollected = "1";
      answerData.collectCount = commonUtils.strAddOne(answerData.collectCount)
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async cancelCollected(answerId) {
      let params = {
        "answerId": answerId
      };
      let message = await axios.post("/shane_answer/delete_one_answer_collect", params);
      console.log(message);
      const answerData = this.answerDataList.find(obj => obj.answerId === answerId);
      answerData.nowUserCollected = "0";
      answerData.collectCount = commonUtils.strSubOne(answerData.collectCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async againsted(answerId) {
      let params = {
        "answerId": answerId
      }
      let message = await axios.post("/shane_answer/insert_one_answer_against", params);
      const answerData = this.answerDataList.find(obj => obj.answerId === answerId);
      answerData.nowUserAgainsted = "1";
      answerData.againstCount = commonUtils.strAddOne(answerData.againstCount)
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async cancelAgainsted(answerId) {
      let params = {
        "answerId": answerId
      };
      let message = await axios.post("/shane_answer/delete_one_answer_against", params);
      console.log(message);
      const answerData = this.answerDataList.find(obj => obj.answerId === answerId);
      answerData.nowUserAgainsted = "0";
      answerData.againstCount = commonUtils.strSubOne(answerData.againstCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    getQuestionId() {
      let questionId = null;
      if (this.questionId !== null && this.questionId !== "" && this.questionId !== undefined) {
        questionId = this.questionId;
      }
      return questionId;
    },
    async requestNextData(){
      if (this.pageText === nameMapping.NO_NEXT_DATA) {
        ElMessage({
          showClose: true,
          message: nameMapping.NO_NEXT_DATA,
          type: 'message',
          center: true,
          duration: 1000,
        });
        return 0;
      }

      ElMessage({
        showClose: true,
        message: nameMapping.LOADING,
        type: 'message',
        center: true,
        duration: 1000,
      });

      this.pageNo += 1;
      let params = {
        "pageNo": this.pageNo,
        "pageSize": this.pageSize,
        "questionId": this.getQuestionId()
      };
      let answerDataList = await axios.get("/shane_answer/page_by_content", params);
      console.log(answerDataList);
      Array.prototype.push.apply(this.answerDataList, answerDataList);
      if (answerDataList.length === 0) {
        this.pageText = nameMapping.NO_NEXT_DATA;
        return 0;
      }

    },
    async changeShowComment(answerId) {
      const answerData = await this.answerDataList.find(obj => obj.answerId === answerId);
      if ( answerData.showComment === '1' ) {
        answerData.showComment = '0'
      }
      else if (answerData.showComment === '0') {
        answerData.showComment = '1'
      }
    },
    toAnswerInfo(answerId, questionId) {
      let params = {
        "answerId": answerId,
        "questionId": questionId,
      };
      let routeData =router.resolve({
        path: "/answer/info",
        query: params
      });
      window.open(routeData.href, '_blank')
    },
  },
  props: {
    questionId: String,
  },

};
</script>

<style scoped>
.main-bg {
  background-color: #ffffff;
  width: 70%;
  box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
  /*height: 100vh;*/
  height: auto;
  margin: 20px auto 0 auto;
}



.tabs {
  /*margin: 20px 30px;*/
  padding: 20px 30px;
}

.tabs:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
}
.user {
  color: #646262FF;
  padding-bottom: 10px;
  display: flex;
}

.title {
  color: #000;
  font-size: larger;
  padding-bottom: 10px;
  font-weight: bold;
}

.displayText {
  padding-bottom: 10px;
  cursor:pointer;
}

.bottom-time {
  color: #a2a2a2;
  font-size: 13px;
}

.bottom-items {
  display: flex;
}

.up-down {
  background-color: #e4eefb;
  color: #056ce7;
  width: 80px;
  text-align: center;
  height: 24px;
  line-height: 20px;
  border-radius: 10px;
  margin: 10px 20px 0 0;
}

.up-down:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.up-downed {
  background-color: #e4eefb;
  color: #8a8f97;
  width: 90px;
  text-align: center;
  height: 24px;
  line-height: 20px;
  border-radius: 10px;
  margin: 10px 20px 0 0;
  user-select:none;
}

.up-down:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.up-downed:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.like {
  color: #8392a4;
  margin: 10px 20px 0 0;
}

.question-main {
  overflow: scroll;
  height: 100vh;
}

.more-data {
  text-align: center;
  padding: 20px 30px;
  border-bottom: #e3e3e3 2px solid;
  border-top: #e3e3e3 2px solid;
}

.more-data:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  border-top: 2px solid #54b4f8;
}
</style>
